import React from "react";
import { Menu, MenuProps } from "antd";
import "@/layouts/components/Sider.css";
import { useNavigate } from "react-router-dom";

function Sider() {
  const navgite = useNavigate();
  type MenuItem = Required<MenuProps>["items"][number];

  const items: MenuItem[] = [
    {
      key: "home",
      type: "group",
      children: [
        {
          key: "/home/recommended",
          icon: (
            <img src=""></img>
          ),
          label: "精选推荐",
        },
        {
          key: "/home/workbench",
          icon: (
            <img src=""></img>
          ),
          label: "工作台",
        },
        {
          key: "/home/creating",
          icon: (
            <img src=""></img>
          ),
          label: "创建设计",
        },
        {
          key: "/home/preference",
          icon: (
            <img src=""></img>
          ),
          label: "偏好设置",
        },
        {
          key: "/home/collection",
          icon: (
            <img src=""></img>
          ),
          label: "我的收藏",
        },
      ],
    },
    {
      key: "_two",
      type: "group",
      label: "创意设计",
      children: [
        {
          key: "/h5",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/6k7LU29s8O7OsGZ.png"></img>
          ),
          label: "H5",
        },
        {
          key: "/201",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/lpfOl0UMj6ML8NO.png"></img>
          ),
          label: "海报",
        },
        {
          key: "/202",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/6aDg0JfuhGUZ0bT.png"></img>
          ),
          label: "长页",
        },
        {
          key: "/203",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/lKhHqwEK8KCleZ6.png"></img>
          ),
          label: "表单",
        },
        {
          key: "/204",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/MUchc97O6eFZDyY.png"></img>
          ),
          label: "互动",
        },
        {
          key: "/205",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/EKeY5bqOiz5MsNN.png"></img>
          ),
          label: "电子画册",
        },
        {
          key: "/206",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/MVNPdzJrxyj6KDR.png"></img>
          ),
          label: "视频",
        },
        {
          key: "/207",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/YfpHNeEfPHO1RFA.png"></img>
          ),
          label: "AI创作",
        },
        {
          key: "/208",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/JU2LuIspceaETcj.png"></img>
          ),
          label: "数字人",
        },
        {
          key: "/209",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/QnQzv1Z2AJq0vTn.png"></img>
          ),
          label: "作图工具",
        },
        {
          key: "/210",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/fOywGeOPXzahzyU.png"></img>
          ),
          label: "销售工具",
        },
      ],
    },
    {
      key: "_fun",
      type: "group",
      label: "其他",
      children: [
        {
          key: "301",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/6k7LU29s8O7OsGZ.png"></img>
          ),
          label: "案例中心",
        },
        {
          key: "/302",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/lpfOl0UMj6ML8NO.png"></img>
          ),
          label: "正版素材",
        },
        {
          key: "/303",
          icon: (
            <img src="//images.weserv.nl/?url=https://asset.eqh5.com//mall/manager/public/6aDg0JfuhGUZ0bT.png"></img>
          ),
          label: "成为设计师",
        },
      ],
    },
  ];

  const onClick: MenuProps["onClick"] = (e) => {
    console.log(e.key);
    navgite(e.key);
  };

  return (
    <div className="sidebar">
      <Menu
        className="sidebar_main"
        onClick={onClick}
        style={{ width: 160 }}
        defaultSelectedKeys={["1"]}
        defaultOpenKeys={["sub1"]}
        mode="inline"
        items={items}
      ></Menu>
    </div>
  );
}
export default Sider;
